import React, { PureComponent } from 'react';
import axios from 'axios';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Card,
  message,
  Row,
  Col,
  Divider,
  Table,
  Avatar,
  Modal,
  Select,
  Steps,
  Button,
  Message,
  Upload,
  Input,
  Tabs,
  DatePicker,
} from 'antd';
import styles from './index.less';
import router from 'umi/router';
import lodash from 'lodash';
import { mgrAxios, osAxios, urlParse } from '@/utils/utils';
import moment from 'moment';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
// 引入头部组件
const {Step} = Steps;
const {Dragger} = Upload;
const FormItem = Form.Item;
const {TabPane} = Tabs;
const {Option} = Select;
const { RangePicker, MonthPicker } = DatePicker;

@Form.create()
class LocalPolicy extends PureComponent {
  state = {
    switch: true,
    disabledSwitch: false,
    modalVisible: false,
    defaultSwitch: true,
    isprovidentFund: ''
  };

  // 新增数据
  addDate = (e) => {
    const { dispatch } = this.props;
    
    if(this.state.isprovidentFund == 1){
      this.props.form.resetFields();
      this.setState({
        switch: true,
        modalVisible: true,
        defaultSwitch: false,
      });
      dispatch({
        type: 'localpolicy/clearDefault',
        payload: {e},
      });
    }else{
        // const accuLsPkg = this.props.form.getFieldsValue(['accuLsPkgName'])
        // console.log(accuLsPkg.accuLsPkgName)
        // if(accuLsPkg.accuLsPkgName == undefined || accuLsPkg.accuLsPkgName == '' || accuLsPkg.accuLsPkgName == null){
        //   message.warning('组合名称名称不能为空！')
        //   return
        // }
        // this.setState({
        //   switch: true,
        //   modalVisible: true,
        //   defaultSwitch: false,
        // });
        // dispatch({
        //   type: 'localpolicy/clearDefault',
        //   payload: {e},
        // });
        // this.props.form.resetFields(['empTime','corpBaseUprLmt','empBaseUprLmt','corpBaseLwrLmt','empBaseLwrLmt','corpProp',
        // 'empProp','corpFixSum','empFixSum','corpCarryRule','empCarryRule',]);

      

    }
    // this.props.form.resetFields();
    // 开关是成功的毁掉
  };

  componentDidMount() {
    console.log(this.props)
    this.setState({
      isprovidentFund: this.props.isprovidentFund
    })
  }

  // 模态框显隐
  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };

  // 切换险种
  bizTabChange = value => {
    const { dispatch, localpolicy } = this.props;
    dispatch({
      type: 'localpolicy/changeinsuranceMessage',
      payload: { value },
    });
    const paramet = {
      insLsPkgId: localpolicy.groupId,
      joinIdeId: localpolicy.payerIds,
      type: value,
    }
    // 添加完以后获取该缴费人员下该险种下的所有信息
    dispatch({
      type: 'localpolicy/insuranceInformation',
      payload: paramet,
    })
    dispatch({
      type: 'localpolicy/clearDefault',
      payload: {},
    });
  };

  // 提交数据
  submitData = () => {
    alert(99)
    this.props.form.validateFields((err, values) => {
      console.log(values)
      values.accuLsPkgName = 1
      if (!err) {
        const { dispatch, localpolicy } = this.props;
        this.props.form.validateFieldsAndScroll((err, values) => {
          if (!err) {
            if(localpolicy.isModify == 2){
              const parameter = {
                insLsPkgId: localpolicy.groupId, // 组id
                corpBaseLwrLmt: values.corpBaseLwrLmt, // 企业基数下限
                corpBaseUprLmt: values.corpBaseUprLmt, // 企业基数上限
                corpCarryRule: values.corpCarryRule, // 企业进位规则
                corpFixSum: values.corpFixSum, // 企业固定金额
                corpProp: values.corpProp, // 企业缴费比例
                empBaseLwrLmt: values.empBaseLwrLmt, // 个人基数下限
                empBaseUprLmt: values.empBaseUprLmt, // 个人基数上限
                empCarryRule: values.empCarryRule, // 个人进位规则
                empFixSum: values.empFixSum, // 个人固定金额
                empProp: values.empProp, // 个人缴费比例
                joinIdeId: localpolicy.payerIds, // 缴费人员id 
                beginDate: values.empTime.valueOf(), // 时间
                type: localpolicy.insuranceIds, // 险种id        
                isModify: localpolicy.isModify   // 是新增还是修改
              }
              
              if(this.state.isprovidentFund == 1) {
                dispatch({
                  type: 'localpolicy/saveInsurance',
                  payload: parameter,
                  callback: response => {
                    if (response.success) {
                      this.setState({
                        modalVisible: false
                      })
                      const paramet = {
                        insLsPkgId: localpolicy.groupId,
                        joinIdeId: localpolicy.payerIds,
                        type: localpolicy.insuranceIds,
                      }
                      // 添加完以后获取该缴费人员下该险种下的所有信息
                      dispatch({
                        type: 'localpolicy/insuranceInformation',
                        payload: paramet,
                      })
                    }
                  },
                })
              }else{

              }

              
            }else{
              alert(2)
              const parameter = {
                locStdId: localpolicy.viewDataMessage.locStdId, // 这个险种下的某个时间段的修改
                corpBaseLwrLmt: values.corpBaseLwrLmt, // 企业基数下限
                corpBaseUprLmt: values.corpBaseUprLmt, // 企业基数上限
                // corpCarryRule: values.corpCarryRule, // 企业进位规则   /////////
                corpCarryRule: localpolicy.viewDataMessage.corpCarryRule, // 企业进位规则   viewDataMessage


                corpFixSum: values.corpFixSum, // 企业固定金额
                corpProp: values.corpProp, // 企业缴费比例
                empBaseLwrLmt: values.empBaseLwrLmt, // 个人基数下限
                empBaseUprLmt: values.empBaseUprLmt, // 个人基数上限
                // empCarryRule: values.empCarryRule, // 个人进位规则     /////// 
                empCarryRule: localpolicy.viewDataMessage.empCarryRule, // 个人进位规则      empCarryRule


                type: localpolicy.insuranceIds, // 险种id       
                empFixSum: values.empFixSum, // 个人固定金额
                empProp: values.empProp, // 个人缴费比例
                joinIdeId: localpolicy.payerIds, // 缴费人员id 
                beginDate: values.empTime.valueOf(), // 时间
                isModify: localpolicy.isModify,   // 是新增还是修改
                vno: localpolicy.viewDataMessage.vno
              }
              dispatch({
                type: 'localpolicy/saveInsurance',
                payload: parameter,
                callback: response => {
                  if (response.success) {
                    this.setState({
                      modalVisible: false
                    })
                    const paramet = {
                      insLsPkgId: localpolicy.groupId,
                      joinIdeId: localpolicy.payerIds,
                      type: localpolicy.insuranceIds,
                    }
                    // 添加完以后获取该缴费人员下该险种下的所有信息
                    dispatch({
                      type: 'localpolicy/insuranceInformation',
                      payload: paramet,
                    })
                  }
                },
              })
            }
          }
        })
      }
    });
  };

    // 只有修改和删除并存，，     保存 和 取消
    // 删除时间
    deleteTime = (timeitem) => {
      const { dispatch, localpolicy} = this.props;
      const parame = {list:[{
        locStdId: timeitem.locStdId,
        vno: timeitem.vno
      }]}
      dispatch({
        type: 'localpolicy/deletetimes',
        payload: parame,
        callback: response => {
          if (response.success) {
            message.success('删除成功！')     
            const paramet = {
              insLsPkgId: localpolicy.groupId,
              joinIdeId: localpolicy.payerIds,
              type: localpolicy.insuranceIds,
            }
            // 删除完以后获取该缴费人员下该险种下的所有信息
            dispatch({
              type: 'localpolicy/insuranceInformation',
              payload: paramet,
            })
          }
        },
      })
    }

    // 修改险种
    saveRiskmessage = (timeitem,e) => {
      this.props.form.resetFields();
      const { dispatch, localpolicy } = this.props;
      this.setState({
        defaultSwitch: true,
        modalVisible: true
      })
      dispatch({
        type: 'localpolicy/viewData',
        payload: {timeitem,e}
      })
    }

  // 点击查看右侧的
  detailItem = (timeitem,e) =>{
    const { dispatch } = this.props;
    dispatch({
      type: 'localpolicy/viewData',
      payload: {timeitem}
    })
  }

  // 禁止的时间
  disabledDate = (startValue, limitValue) => {
    if (!startValue) {
      return false;
    }
    return startValue.valueOf() < moment(limitValue).valueOf();
  };

  // 选择 企业进位规则 和 个人进位规则
  selectChange = (name, e) => {
    const { dispatch, localpolicy } = this.props;
    if(localpolicy.viewDataMessage.corpCarryRule || localpolicy.viewDataMessage.empCarryRule){
      dispatch({
        type: 'localpolicy/selectMessage',
        payload: {name,e}
      })
    }
  };

  render() {
    const { form, dispatch, localpolicy } = this.props;
    console.log(localpolicy)
    const formItemLayout = {
      labelCol: { md: { span: 10 } },
      wrapperCol: { md: { span: 10 } },
    };
    
    const formItemLayoutone = {
      labelCol: { md: { span: 0 } },
      wrapperCol: { md: { span: 3 } },
    };
    const { getFieldDecorator, validateFieldsAndScroll, getFieldsError, setFieldsValue } = form;
    const { modalVisible } = this.state;
    return (
      <Form>
        <Row>
          <Col style={{ width: '100px', float: 'left' }}>

            {
            console.log('接口数据localpolicy',localpolicy)
          }
            {
              localpolicy.dictionaryData.BIZ_INS_TYPE ?
                <Tabs defaultActiveKey={localpolicy.dictionaryData.BIZ_INS_TYPE[0] ? localpolicy.dictionaryData.BIZ_INS_TYPE[0].itemCode : ''} tabPosition="left" onChange={this.bizTabChange}>
                  {localpolicy.dictionaryData.BIZ_INS_TYPE.map((bizItem, index) => (<TabPane tab={bizItem.itemName} key={bizItem.itemCode} />))}
                </Tabs> : 
                <Tabs tabPosition="left" onChange={this.bizTabChange}>
                  {localpolicy.dictionaryData.BIZ_ACCU_TYPE ? localpolicy.dictionaryData.BIZ_ACCU_TYPE.map((bizItem, index) => (<TabPane tab={bizItem.itemName} key={bizItem.itemCode} />)) : null}
                </Tabs>
            }

            {/* <Tabs tabPosition="left" onChange={this.bizTabChange}>
              { 
                localpolicy.dictionaryData.BIZ_ACCU_TYPE.map((bizItem, index) => (
                  <TabPane tab={bizItem.itemName} key={bizItem.itemCode}></TabPane>)
                )
              }
            </Tabs> */}
          </Col>

          <Col style={{ width: '270px', float: 'left' }}>
            <Col style={{ height: 360, minHeight: 360, lineHeight: '25px', overflow: 'hidden', overflowY: 'scroll' }}>
              <Button style={{ width: '150px' }} type="primary" onClick={() => this.addDate(2)}>新增时间段</Button>
              {
                localpolicy.insuranceInformationData.length == 0 ? null : localpolicy.insuranceInformationData.map((timeitem, itemindex) => (
                  <div>
                    <Button
                      style={{ width: '150px', marginRight: 5, marginTop: 10, float: 'left' }}
                      className={timeitem.active ? styles.activeButton : styles.noActiveButton}
                      onClick={() =>
                          this.detailItem(timeitem,1)
                        }
                    >
                      {moment(timeitem.beginDate).format('YYYY-MM')}
                    </Button>
                    {itemindex == 0 ?
                      <div style={{ float: 'left', lineHeight: '50px' }}>
                        {this.state.switch ? <a style={{ margin: '0 15px 0 0' }} onClick={()=>this.saveRiskmessage(timeitem,1)}>修改</a> : <a style={{ margin: '0 15px 0 0' }} onClick={()=>this.saveRiskmessage(timeitem,1)}>修改</a>}
                        <a style={{ marginRight: '15px' }} onClick={() => this.deleteTime(timeitem)}>删除</a>
                      </div>
                        : null}
                  </div>
                  ))
              }
            </Col>
          </Col>
          <Col style={{ width: '540px', float: 'left', marginLeft: '20px' }}>

            <Row>
              <Col span={12}>
                <FormItem {...formItemLayout} label="企业基数上限">
                  {/* <span>{localpolicy.insuranceInformationData.length > 0 ? localpolicy.insuranceInformationData[0].corpBaseUprLmt : localpolicy.viewDataMessage.corpBaseUprLmt}</span> */}
                  <span>{localpolicy.viewDataMessage.corpBaseUprLmt}</span>
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label="个人基数上限">
                  {/* <span>{localpolicy.insuranceInformationData.length > 0 ? localpolicy.insuranceInformationData[0].empBaseUprLmt : localpolicy.viewDataMessage.empBaseUprLmt}</span> */}
                  <span>{localpolicy.viewDataMessage.empBaseUprLmt}</span>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <FormItem {...formItemLayout} label="企业基数下限">
                  {/* <span>{localpolicy.insuranceInformationData.length > 0 ? localpolicy.insuranceInformationData[0].corpBaseLwrLmt : localpolicy.viewDataMessage.corpBaseLwrLmt}</span> */}
                  <span>{localpolicy.viewDataMessage.corpBaseLwrLmt}</span>
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label="个人基数下限">
                  {/* <span>{localpolicy.insuranceInformationData.length > 0 ? localpolicy.insuranceInformationData[0].empBaseLwrLmt : localpolicy.viewDataMessage.empBaseLwrLmt}</span> */}
                  <span>{localpolicy.viewDataMessage.empBaseLwrLmt}</span>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <FormItem {...formItemLayout} label="企业缴费比例">
                  <Col span={10}>
                    {/* <span>{localpolicy.insuranceInformationData.length > 0 ? localpolicy.insuranceInformationData[0].corpProp : localpolicy.viewDataMessage.corpProp}</span> */}
                    <span>{localpolicy.viewDataMessage.corpProp}</span>
                  </Col>
                  <Col span={1} offset={1}>%</Col>
                </FormItem>
              </Col>

              <Col span={12}>
                <FormItem {...formItemLayout} label="个人缴费比例">
                  <Col span={10}>
                    {/* <span>{localpolicy.viewDataMessage.empProp == undefined ? localpolicy.insuranceInformationData[0].empProp : localpolicy.viewDataMessage.empProp }</span> */}
                    <span>{localpolicy.viewDataMessage.empProp}</span>
                  </Col>
                  <Col span={1} offset={1}>%</Col>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <FormItem {...formItemLayout} label="企业固定金额">
                  {/* <span>{localpolicy.insuranceInformationData.length > 0 ? localpolicy.insuranceInformationData[0].corpFixSum : localpolicy.viewDataMessage.corpFixSum}</span> */}
                  <span>{localpolicy.viewDataMessage.corpFixSum}</span>
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label="个人固定金额">
                  {/* <span>{localpolicy.insuranceInformationData.length > 0 ? localpolicy.insuranceInformationData[0].empFixSum : localpolicy.viewDataMessage.empFixSum}</span> */}
                  <span>{localpolicy.viewDataMessage.empFixSum}</span>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <FormItem {...formItemLayout} label="企业进位规则">
                  {/* <span>{localpolicy.insuranceInformationData.length > 0 ? localpolicy.insuranceInformationData[0].corpCarryRuleName : localpolicy.viewDataMessage.corpCarryRuleName}</span> */}
                  <span>{localpolicy.viewDataMessage.corpCarryRuleName}</span>
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label="个人进位规则">
                  {/* <span>{localpolicy.insuranceInformationData.length > 0 ? localpolicy.insuranceInformationData[0].empCarryRuleName : localpolicy.viewDataMessage.empCarryRuleName}</span> */}
                  <span>{localpolicy.viewDataMessage.empCarryRuleName}</span>
                </FormItem>
                   
              </Col>
            </Row>
          </Col>
        </Row>

        <Modal
          width={550}
          title='时间段信息'
          visible={modalVisible}
          okText="确定"
          cancelText="取消"
          onOk={this.submitData}
          onCancel={() => this.handleModalVisible(false)}
        // confirmLoading={confirmLoading}
        >
          <Form layout="horizontal">
            <Row>
              <Col style={{ width: '500px', float: 'left', marginLeft: '20px' }}>
                <Row>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="新增时间段">
                      {
                        getFieldDecorator('empTime', {
                        rules: [{ required: true, message: '请选择时间段' }],
                        
                        initialValue:  (this.state.defaultSwitch ? moment(localpolicy.viewDataMessage.beginDate) : null)
                      })(
                        <MonthPicker
                          format="YYYY-MM"
                          placeholder="请选择"
                          style={{ width: '150px', float: 'left' }}
                          disabledDate={startValue =>
                            this.disabledDate(
                              startValue,
                              localpolicy.rangeDate
                              // '2019-06'
                            )
                          }
                          allowClear={false}
                        />
                      )}
                    </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="企业基数上限">
                      {getFieldDecorator('corpBaseUprLmt', {
                        rules: [
                          { required: true, message: '请输入企业基数上限' },
                        ],
                        initialValue: localpolicy.viewDataMessage.corpBaseUprLmt,
                      })(
                        <Input
                          placeholder="请输入"
                          disabled={this.state.disabledSwitch}
                        />
                      )}
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="个人基数上限">
                      {getFieldDecorator('empBaseUprLmt', {
                        rules: [
                          { required: true, message: '请输入个人基数上限' },
                        ],
                        initialValue: localpolicy.viewDataMessage.empBaseUprLmt,
                      })(
                        <Input
                          placeholder="请输入"
                          disabled={this.state.disabledSwitch}
                        />
                      )}
                    </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="企业基数下限">
                      {getFieldDecorator('corpBaseLwrLmt', {
                        rules: [
                          { required: true, message: '请输入企业基数下限' },
                        ],
                        initialValue: localpolicy.viewDataMessage.corpBaseLwrLmt,
                      })(
                        <Input
                          placeholder="请输入"
                          disabled={this.state.disabledSwitch}
                        />
                      )}
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="个人基数下限">
                      {getFieldDecorator('empBaseLwrLmt', {
                        rules: [
                          { required: true, message: '请输入个人基数下限' },
                        ],
                        initialValue: localpolicy.viewDataMessage.empBaseLwrLmt,
                      })(
                        <Input
                          placeholder="请输入"
                          disabled={this.state.disabledSwitch}
                        />
                      )}
                    </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="企业缴费比例">
                      <Col span={22}>
                        {getFieldDecorator('corpProp', {
                          rules: [ { required: true, message: '请输入企业缴费比例', } ],
                          initialValue: localpolicy.viewDataMessage.corpProp,
                        })(
                          <Input
                            placeholder="请输入"
                            disabled={this.state.disabledSwitch}
                          />
                        )}
                      </Col>
                      <Col span={1} offset={1}>%</Col>
                    </FormItem>
                  </Col>

                  <Col span={12}>
                    <FormItem {...formItemLayout} label="个人缴费比例">
                      <Col span={22}>
                        {getFieldDecorator('empProp', {
                          rules: [{ required: true, message: '请输入个人缴费比例'} ],
                          initialValue: localpolicy.viewDataMessage.empProp,
                        })(
                          <Input
                            placeholder="请输入"
                            disabled={this.state.disabledSwitch}
                          />
                        )}
                      </Col>
                      <Col span={1} offset={1}>%</Col>
                    </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="企业固定金额">
                      {getFieldDecorator('corpFixSum', {
                        rules: [
                          { required: true, message: '请输入企业固定金额' },
                        ],
                        initialValue: localpolicy.viewDataMessage.corpFixSum,
                      })(
                        <Input
                          placeholder="请输入"
                          disabled={this.state.disabledSwitch}
                        />
                      )}
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="个人固定金额">
                      {getFieldDecorator('empFixSum', {
                        rules: [
                          { required: true, message: '请输入个人固定金额' },
                        ],
                        initialValue: localpolicy.viewDataMessage.empFixSum,
                      })(
                        <Input
                          placeholder="请输入"
                          disabled={this.state.disabledSwitch}
                        />
                      )}
                    </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="企业进位规则">
                      {getFieldDecorator('corpCarryRule', {
                        rules: [
                          { required: true, message: '请选择企业进位规则' },
                        ],
                        initialValue: localpolicy.viewDataMessage.corpCarryRuleName,
                      })(
                        <Select
                          placeholder="请选择"
                          style={{ width: '100%' }}
                          disabled={this.state.disabledSwitch}
                          onChange={e =>
                            this.selectChange('corpCarryRule', e)
                          }
                        >
                          {localpolicy.dictionaryData.CARRY_RULE ? localpolicy.dictionaryData.CARRY_RULE.map((value, index) => (
                            <Option value={value.itemCode}>
                              {value.itemName}
                            </Option>
                            )):null}
                        </Select>
                      )}
                    </FormItem>
                  </Col> 
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="个人进位规则">
                      {getFieldDecorator('empCarryRule', {
                        rules: [
                          { required: true, message: '请选择个人进位规则' },
                        ],
                        initialValue: localpolicy.viewDataMessage.empCarryRuleName,
                      })(
                        <Select
                          placeholder="请选择"
                          style={{ width: '100%' }}
                          disabled={this.state.disabledSwitch}
                          onChange={e =>
                            this.selectChange('empCarryRule', e)
                          }
                        >
                          {localpolicy.dictionaryData.CARRY_RULE ? localpolicy.dictionaryData.CARRY_RULE.map((value, index) => (
                            <Option value={value.itemCode}>
                              {value.itemName}
                            </Option>
                            )): null}
                        </Select>
                      )}
                    </FormItem>
                  </Col>
                </Row>
              </Col>
            </Row>
          </Form>
        </Modal>
      </Form>
    )
  }
}
export default LocalPolicy;
